/*
 * @Description: 映射关系导航栏
 * @Author: Zzt
 * @Date: 2022-11-03 10:23:24
 * @LastEditTime: 2023-01-13 16:49:27
 */

import { useEffect, useState } from 'react';
import { Menu, Typography } from 'antd';
import classNames from 'classnames/bind';
import { useMappingRelationContext } from '../contexts/MappingRelationContext';
import styles from '../styles/sidebar.module.scss';
import { useMappingRouterTypeContext } from '../contexts/MappingRouterTypeContext';

const cx = classNames.bind(styles);

const NavSidebar = () => {
  const { getCurrent, setSelectKey, calssFilter } = useMappingRelationContext();
  const { classification } = useMappingRouterTypeContext();
  const [current, setCurrent] = useState(0);
  const items = [{ label: `${calssFilter(classification)}与档案类型`, key: 9 }];

  useEffect(() => {
    setCurrent(items[0].key);
  }, []);

  useEffect(() => {
    setSelectKey([]);
    getCurrent(current);
  }, [current]);

  const onSelect = ({ key }: any) => {
    setCurrent(parseInt(key, 10));
  };

  return (
    <div className={cx('container')}>
      <Typography.Title level={5} className={cx('at-header')}>
        映射关系类型
      </Typography.Title>
      <div className={cx('at-list-wrap')}>
        <Menu
          items={items}
          selectedKeys={[`${current}`]}
          onSelect={onSelect}
          style={{ width: 200 }}
        />
      </div>
    </div>
  );
};
export default NavSidebar;
